<template>
	<div id="calendar">
		<div class="queryPanel">
			<ul>
				<li>
					<span>开始时间：</span>
					<DatePicker v-model="Request.startDate" @on-change="startDateChange" type="date" placeholder="Select date"></DatePicker>
				</li>
				<li>
					<span>航班：</span>
					<Select v-model="Request.airlineCode" @on-change="airlineCodeChange" style="width:90px;">
						<Option v-for="item in flightNoList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					</Select>
				</li>
				<li>
					<span>起点：</span>
					<Input v-model="Request.from"/>					
				</li>
				<li>
					<span>终点：</span>
					<Input v-model="Request.to"/>					
				</li>
				<li>
					<span>舱位：</span>
					<Select v-model="Request.cabinCode" style="width:90px;">
						<Option v-for="item in cabinCodeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					</Select>
				</li>
				<li>
					<Button @click="search" class="search">查询</Button>
				</li>
			</ul>
		</div>
		<div class="calendarPanel" v-if="show">
			<div class="prev iconfont changePage" @click="changePage('prev')">
				<span class="iconfont">&#xe600;</span>
			</div>
			<div class="next iconfont changePage" @click="changePage('next')">
				<span class="iconfont">&#xe774;</span>
			</div>
			<table>
				<tr class="weeks">
					<th>周一</th>
					<th>周二</th>
					<th>周三</th>
					<th>周四</th>
					<th>周五</th>
					<th>周六</th>
					<th>周日</th>
				</tr>
				<tr v-for="week in data">
					<td v-for="day in week" style="width:14.3%;">
						<div class="dayMain" v-if="!day.faker" @click="toCenter(day)">
							<div class="dayTop">
								<p>
									<b class="hao">{{(day.forecastDate).substr(8,10)}}</b>
									<b>({{ (day.forecastDate).substr(0,7) }})</b>
								</p>
								<img v-if="day.attendanceRate>80" src="../../../assets/high.png" alt="" />
								<img v-if="day.attendanceRate<30" src="../../../assets/low.png" alt="" />
							</div>
							<div class="dayData">
								<li>
									<span class="iconfont">&#xe612;</span>
									<span>座位数：{{day.seat}}</span>
								</li>
								<li>
									<span class="iconfont">&#xe618;</span>
									<span>需求：{{day.demand}}</span>
								</li>								
								<li>
									<span class="iconfont">&#xe60c;</span>
									<span>登机：{{day.checkinNum}}</span>
								</li>
								<li>
									<span class="iconfont">&#xe63c;</span>
									<span>上座率：{{day.attendanceRate}}</span>
								</li>
							</div>
						</div>
					</td>
				</tr>
			</table>

		</div>
		<div class="tendencyPanel" v-if="show">
			<div class="title">
				<span class="iconfont">&#xe602;</span>
				<span>趋势图</span>
			</div>
			<div ref="tendency" class="tendency"></div>
		</div>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	@import "./style.scss";
</style>